<template>
  <div class="log-management-container">
    <table-view :cols="cols" :tableData="tableData" :showPaginator="true" :showSearch="searchCondition.length > 0"
                :searchCondition="searchCondition" :pageNumber="pageNumber" :pageSize="pageSize"
                :totalRecords="totalRecords" @on-search="searchData" @size-change="sizeChange"
                @current-page-change="pageChange" @preClick="pageChange" @nextClick="pageChange">
      <div class="operate">
        <el-popover
          placement="left"
          width="400"
          trigger="hover">
          <div class="log-management-del-operate">
            <p class="warning-text">注：只删除此时间点之前的数据</p>
            <el-input-number v-model="time.value" controls-position="right" :precision="0" :min="1" size="mini" class="time-value"></el-input-number>
            <el-radio-group v-model="time.unit" size="mini" class="time-unit">
              <el-radio v-for="item in options" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
            <div>
              <el-button type="primary" plain size="mini" @click="deleteData">确 定</el-button>
            </div>
          </div>
          <el-button slot="reference" type="primary" size="small">删 除</el-button>
        </el-popover>
      </div>
    </table-view>
  </div>
</template>

<script>

export default {
  name: "logManagement",
  components: {
    // TableView
  },
  data() {
    let baseUrl = managerRemoteUrl;
    return {
      urls: {
        getTableHeaderUrl: baseUrl + '/logInfo/getHeader', // 表头
        getTableDataUrl: baseUrl + '/logInfo/getData', // 表格
        deleteDataUrl: baseUrl + '/logInfo/deleteData', // 删除数据
      },
      cols: [], // 表头
      tableData: [], // 表格
      pageNumber: 1,
      pageSize: 10,
      totalRecords: 0,
      searchCondition: [],
      searchFilter: {},
      options: [
        {label: '秒', value: 's'},
        {label: '分钟', value: 'm'},
        {label: '小时', value: 'h'},
        {label: '天', value: 'd'},
      ],
      time: {
        value: 1,
        unit: 'd',
      }
    }
  },
  mounted() {
    this.getTableHeader();
  },
  methods: {
    //获取表格的表头数据
    getTableHeader() {
      this.cols = [];
      this.searchCondition = [];
      this.httpRequest("get", this.urls.getTableHeaderUrl, {}, {fullSuccess: true}).then(res => {
        this.cols = res.value.cols;
        res.value.cols.forEach((d) => {
          if (d.search) {
            let obj = this.cloneObj(d);
            if (-1 !== d.header.indexOf('时间') && (-1 === d.type.indexOf('range'))) {
              let start = this.cloneObj(d);
              start['metaField'] = start.field;
              start['label'] = start.header.replace('时间', '开始时间');
              start['field'] = start.field.replace('time', 'timeStart');
              start['metaField'] = start.field;
              start['value'] = null;
              this.searchCondition.push(start);
              let end = this.cloneObj(d);
              end['label'] = end.header.replace('时间', '结束时间');
              end['field'] = end.field.replace('time', 'timeEnd');
              start['metaField'] = start.field;
              end['value'] = null;
              this.searchCondition.push(end);
            } else {
              obj['label'] = d.header;
              obj['value'] = null;
              this.searchCondition.push(obj);
            }
          }
        });
        let filterResult = this.setFilter(this.searchCondition);
        if (!filterResult.tip) {
          this.searchFilter = filterResult.data;
          this.getTableData();
        } else {
          this.$message.warning(filterResult.tip)
        }
      }).catch(err => {
        console.log(err);
      });
    },
    //获取表格的表格数据
    getTableData() {
      let param = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        filter: this.searchFilter
      }
      this.httpRequest("post", this.urls.getTableDataUrl, param, {fullSuccess: true}).then(res => {
        this.tableData = res.value.data || [];
        this.totalRecords = res.value.rows;
      })
    },
    // 删除数据
    deleteData() {
      if(this.time.value && this.time.unit) {
        this.$confirm('此操作将永久删除此时间点前的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj = {
            period: this.time.value + this.time.unit
          }
          this.httpRequest("post", this.urls.deleteDataUrl, obj, {fullSuccess: true}).then(res => {
            this.$message.success('删除成功！')
            this.getTableData();
          })
        })
      } else {
        this.$message.warning('请选输入时间！')
      }
    },
    // 搜索
    searchData(e) {
      this.pageNumber = 1;
      let filterResult = this.setFilter(e);
      if (!filterResult.tip) {
        this.searchFilter = filterResult.data;
        this.getTableData();
      } else {
        this.$message.warning(filterResult.tip)
      }
    },
    // 更改pageSize
    sizeChange(size) {
      this.pageNumber = 1;
      this.pageSize = size;
      this.getTableData();
    },
    // 更改page，上一页、下一页、改变currentPage
    pageChange(page) {
      this.pageNumber = page;
      this.getTableData();
    },
  }
}
</script>

<style lang="scss" scoped>
.log-management-container {
  width: 100%;
  height: 100%;
  .operate {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

}
</style>
<style lang="scss">
.log-management-del-operate {
  text-align: center;
  .warning-text {
    color: #f56c6c;
    &::before {
      content: '*';
      color: #f56c6c;
      margin-right: 4px;
    }
  }
  .time-value {
    width: 80%;

  }
  .time-unit {
    margin: 15px 0;
  }
}
</style>
